@charset "UTF-8" ;
@import "_basis";
.tourist-data{
    margin:20px;
    display: flex;
    justify-content: space-around;
    >div{
        flex: 1;
      text-align: center;
      &:nth-of-type(1){
        >p{
          color: #00E4FF;
        }
      }
      &:nth-of-type(2){
        >p{
          color: #53FCB3;
        }
      }
      &:nth-of-type(3){
        >p{
          color: #E76D59;
        }
      }
      &:nth-of-type(4){
        >p{
          color: #9A4CFB;
        }
      }
      &:nth-of-type(5){
        >p{
          color: #4B66C7;
        }
      }
        >span{
            font-size: 16px;
        }
        >p{
          margin-top: 10px;
            font-size: 36px;
          font-weight: bold;
        }
    }
}
.content-title{
  padding-left: 38px;
  justify-content: space-between;
  align-items: center;
  text-indent:0!important;
  >.title-btn{
    display: block;
    width:60px;
    height:20px;
    line-height: 20px;
    border: 1px solid #00e4ff;
    color:#00e4ff;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px;
  }

}
.select-list{
  position: relative;
  height: 24px;
  margin:10px 20px;
  .select-date-box{
    position: absolute;
    display: flex;
    align-items: center;
    height: 24px;
    span{
      color: #fff;
    }
    >input{
      padding-left: 10px;
      width:200px;
      height:24px;
      line-height: 24px;
      margin: 0 10px;
      background-color: transparent;
      border: 1px solid #2EA6FF;
      color: #fff;
    }
    button{
      display: block;
      width: 60px;
      height: 24px;
      border: 1px solid #2EA6FF;
      background-color: transparent;
      color: #2EA6FF;
      &:hover{
        background-color: #2EA6FF;
        color: #fff;
      }
    }
  }
}

.hot-chart{
  position: absolute;
  width: 100%;
  height: 100%;
}
.hot-box{
  display: flex;
  flex-direction: column;
  position: absolute;
  width:100%;
  height:100%;
  .action-box {
    display: flex;
    .time-list-box {
      flex: 1;
      position: relative;
      display: flex;
      justify-content: space-around;
      margin-left: 10px;

      >div {
        text-align: center;
        color: #fff;
        font-size: 12px;
        z-index: 2;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        i {
          display: block;
          width: 8px;
          height: 8px;
          margin: 0 auto;
          border-radius: 50%;
          background-color: #fff;
        }

        &.active {
          i {
            transform: scale(2, 2);
            -ms-transform: scale(2, 2);
            /* IE 9 */
            -webkit-transform: scale(2, 2);
            /* Safari 和 Chrome */
            -o-transform: scale(2, 2);
            /* Opera */
            -moz-transform: scale(2, 2);
            background-color: #14C6CA;
          }
        }

      }

      &::before {
        content: '';
        position: absolute;
        top: 3px;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #14C6CA;
        z-index: 1;
      }
    }
  }

  .my-hot {
    flex: 1;
    margin-top: 10px;
  }
}

.select-box {
  position: relative;
  width: 110px;
}


.flow-list{
  display: block!important;
  width: calc(100% - 30px);
  margin:10px auto;

  li {
    width: 100%;
    overflow: hidden;
    margin-top: 12px;
    &:first-child{
      .name {
        i{
          background-color: #ff5959!important;
          color: #fff!important;
        }
      }
    }
    &:nth-child(2){
      .name{
        i{
          background-color: #f7ac1a!important;
          color: #fff!important;
        }
      }
    }
    &:nth-child(3){
      .name{
        i{
          background-color: #00e4ff!important;
          color: #fff!important;
        }
      }
    }
    .vol {
      width: 39%;
      float: left;
      margin-left: 10px;
      height: 13px;
      margin-top: 4px;
      border-radius: 8px;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
      font-size: 12px;
      line-height: 13px;
      text-indent: 20px;
      >span {
        display: block;
        height: 13px!important;
        border-radius: 5px;
        overflow: hidden;
        background-image: linear-gradient(90deg, #099fac 0%, #489b27 100%), linear-gradient(#099fac, #099fac);
        background-blend-mode: normal, normal;
      }
    }
    .name {
      font-size: 14px;
      color: #fff;
      float: left;

      i {
        width: 15px!important;
        height: 13px!important;
        border-radius: 3px!important;
        background: #fff!important;
        color: #000!important;
        margin-top: 3px;
        text-align: center;
        line-height: 12px!important;
        float: left;
        font-size: 12px!important;
        vertical-align: middle;
        &::before,&::after{
          display: none;
        }
      }

      span {
        margin-left: 8px;
        width: 100px;
      }
    }
    .wea {
      float: right;
      color: #fff;
      >span {
        width: 50px;
        height: 20px;
        line-height: 20px;
        display: inline-block;
        float: left;
      }

      strong {
        width: 126px;
        display: inline-block;
        height: 20px;
        line-height: 20px;
      }
    }
  }
}
